<template>
  <a-modal
    :title="`管理员${title}`"
    :width="640"
    destroyOnClose
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleSubmit"
    @cancel="visible=!visible"
  >
    <a-spin :spinning="loading">
      <a-form :form="form">
        <a-form-item
          label="账号"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input v-decorator="['username', {initialValue: editForm.username,rules: rules.username}]"/>
        </a-form-item>

        <a-form-item
          label="密码"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input v-decorator="['password', {initialValue: editForm.password,rules: rules.password}]"/>
        </a-form-item>


        <a-form-item
          label="用户姓名"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input v-decorator="['nickName', {initialValue: editForm.nickName,rules: rules.nickName}]"/>
        </a-form-item>

        <a-form-item
          label="角色"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-select mode="multiple" v-decorator="['roles', {initialValue: editForm.roles?editForm.roles.map(item=>item.id):[]}]" style="width: 100%"  placeholder="请选择角色">
            <a-select-option v-for="role in roles" :key="role.id">{{role.roleName}}</a-select-option>
          </a-select>
        </a-form-item>

      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>

  const rules = {
    username: [
      { required: true, message: '账号不能空！' },
      { required: true, min: 3, max: 15, message: '账号长度3到15位！' }
    ],
    password: [
      { required: true, message: '密码不能空！' },
      { required: true, min: 6, max: 20, message: '账号长度6到20位！' }
    ],
    nickName: [
      { required: true, message: '用户姓名不能空！' }
    ]
  }

  import saveMixins from '../../../../common/mixins/saveMixins'
  import {selectAll} from "../../../../api/base/role";
  import {saveUser} from '../../../../api/base/admin'

  export default {
    name: 'save',
    data() {
      return {
        rules: rules,
        roles:[]
      }
    },
    mixins: [saveMixins],
    created(){
      selectAll().then(res=>{
        if(res.status===0){
          this.roles=res.data;
        }else {
          this.$message.error(res.msg)
        }
      })
    },
    methods:{
      commit(values){
        return saveUser(values);
      },
      filterForm(values){
         if(values.roles){
           values.roles=values.roles.join(",")
         }
         return values;
      }
    }
  }
</script>

<style scoped>

</style>